<template>
	<view :style="{height:windowHeight+'px'}" class="content">
		<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="添加计划" @clickLeft="back" />
		<view>
			<uni-forms ref="baseForm" :modelValue="baseFormData"  style="padding: 0.5rem;" label-width='80px'>
				<uni-section class="mb-10" title="基本信息"  type="line" titleFontSize="16px">
					<uni-forms-item label="姓名"  required>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="电话" required>
						<uni-easyinput v-model="baseFormData.age" placeholder="请输入电话" />
					</uni-forms-item>
					<uni-forms-item label="计划名称" required>
						<uni-easyinput v-model="baseFormData.age" placeholder="请输入计划名称" />
					</uni-forms-item>
				</uni-section>
				<uni-section class="mb-10" title="巡检区域选择"  type="line" titleFontSize="16px">
				
				
				
					<uni-forms-item label="选择区域" required>
						  <uni-data-select
							v-model="baseFormData.value"
							:localdata="range"
							@change="change"
						  ></uni-data-select>
					</uni-forms-item>
				</uni-section>
				<uni-section class="mb-10" title="计划目标"  type="line" titleFontSize="16px">
					<uni-forms-item label="详细信息">
						<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入详细信息" />
					</uni-forms-item>
				</uni-section>
				<view style="height: 50px;"></view>
			</uni-forms>
		</view>
			
			
			
			
			
			
		<view class="btnStyle">
			<view class="btnDiv">
				<button type="primary" plain="true">发布</button>
				<button plain="true">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				imgList: [],
			// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399,
					value:0
				},
				range: [
				  { value: 0, text: "区域一" },
				  { value: 1, text: "区域二" },
				  { value: 2, text: "区域三" },
				],
				// 单选数据源
								sexs: [{
									text: '否',
									value: 0
								}, {
									text: '是',
									value: 1
								}],
				// 多选数据源
							hobbys: [{
								text: '跑步',
								value: 0
							}, {
								text: '游泳',
								value: 1
							}, {
								text: '绘画',
								value: 2
							}, {
								text: '足球',
								value: 3
							}, {
								text: '篮球',
								value: 4
							}, {
								text: '其他',
								value: 5
							}],
			
			
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		
			callPhone() {
		      // 电话号码为示例，请替换为实际需要拨打的电话号码
		      uni.makePhoneCall({
		        phoneNumber: '13462013124', // 电话号码
		        success: function () {
		          console.log('拨号成功');
		        },
		        fail: function () {
		          console.log('拨号失败');
		        }
		      });
		    },
		
			change(e) {
				console.log("e:", e);
			  },
		
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.btnStyle{
			position: fixed;bottom: 0rem;width: 100%;display: flex;    align-items: center;padding: 1rem 0;
			justify-content: center;
			background-color: white;
			.btnDiv{
				width: 80%;
				display: flex;
				button{
					flex: 1;
					grid-column: 1;
					margin: 0 5px;
				}
			}
		}
		.ml5{
			display: inline-block;margin-left: 1rem;
		}
		
		.img-box {
					display: flex;
					flex-wrap: wrap;
		
					.img-item {
						width: 150rpx;
						height: 150rpx;
						position: relative;
						box-sizing: border-box;
						margin: 15rpx;
		
						.img {
							width: 100%;
							height: 100%;
						}
		
						.img-delete-box {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							right: 0;
							top: 0;
		
							.img-delete-icon {
								width: 100%;
								height: 100%;
							}
						}
		
					}
		
					.upload-icon {
						box-sizing: border-box;
						border: 2rpx solid #bfbfbf;
					}
		
					.upload-icon:before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 60rpx;
						height: 6rpx;
						background-color: #bfbfbf;
						margin: -3rpx 0 0 -30rpx;
						border-radius: 5rpx;
					}
		
					.upload-icon::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 6rpx;
						height: 60rpx;
						background-color: #bfbfbf;
						margin: -30rpx 0 0 -3rpx;
						border-radius: 5rpx;
					}
		
					.img-item:nth-child(4n+1) {
						margin-left: 0;
					}
		
					.img-item:nth-child(4n+4) {
						margin-right: 0;
					}
				}

	}
</style>
